<template>
  <div>
    <ZgDrawer width="85%" ref="layout">
      <Layout :formId="formId"></Layout>
    </ZgDrawer>
    <ZgDrawer width="90%" ref="columnSet">
      <ZgPage
        ref="page"
        title="字段管理"
        addBtnName="选择操作"
        :extraHeight="250"
        :scrollX="1500"
        :pageOpt="{showAddBtn:false,showBatchAddBtn:true}"
        :addOpt="{title:'新增字段',width:'60%'}"
        :updateOpt="{title:'修改字段',width:'60%'}"
        :extraAddBtns="['新增字段','设置视图','同步库表']"
        @search="onSearch"
        @del="onDel"
        @add="onAdd"
        @update="onUpdate"
        @extraAdd="onExtraAdd">
        <template slot="columns">
          <a-table-column :width="150" title="字段名称" dataIndex="name"></a-table-column>
          <a-table-column :width="150" title="字段编码" dataIndex="code"></a-table-column>
          <a-table-column :width="100" title="表单类型" >
            <template slot-scope="text,record">
              <a-tag size="small">{{ record.compType }}</a-tag>
            </template>
          </a-table-column>
          <a-table-column :width="100" title="数据类型" >
            <template slot-scope="text,record">
              <a-tag size="small">{{ record.dataType }}</a-tag>
            </template>
          </a-table-column>
          <a-table-column :width="100" title="扩展属性" >
            <template slot-scope="text,record">
              <a-popover v-if="record.extra&&record.extra!=='{}'" placement="topLeft">
                <template slot="content">
                  <ZgJsonViewer :value="JSON.parse(record.extra)"/>
                </template>
                <div class="primary cpt">查看</div>
              </a-popover>
            </template>
          </a-table-column>
          <a-table-column :width="160" title="默认值" dataIndex="defaultVal"></a-table-column>
          <a-table-column :width="80" title="模糊匹配">
            <template slot-scope="text,record">
              <a-tag size="small" :color="record.isLike?'blue':'#DDD'">{{ record.isLike?'是':'否' }}</a-tag>
            </template>
          </a-table-column>
          <a-table-column :width="200" title="正则表达式" dataIndex="regex"></a-table-column>
          <a-table-column :width="300" title="错误提示语" dataIndex="errorMsg"></a-table-column>
        </template>
        <template slot="add">
          <Add ref="add" :formId="formId"></Add>
        </template>
        <template slot="update" slot-scope="scope">
          <Update ref="update" :jsonStr="scope.jsonStr"></Update>
        </template>
      </ZgPage>
    </ZgDrawer>
    <div @click="toColumnSet" class="primary cpt"><slot>{{ count }}</slot>个字段</div>
  </div>
</template>
<script>
import Add from './Add'
import Update from './Update'
import Layout from './Layout'
export default {
  components: {
    Add, Update, Layout
  },
  props: {
    formId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      count: 0
    }
  },
  watch: {
    formId () {
      this.searchCount()
    }
  },
  mounted () {
    this.searchCount()
  },
  methods: {
    searchCount () {
      this.$http.get('/zg-autoform/column/count', { formId: this.formId }, data => {
        this.count = data
      })
    },
    toColumnSet () {
      this.$refs.columnSet.open()
    },
    onSearch (param) {
      const param1 = Object.assign({ formId: this.formId }, param)
      this.$http.get('/zg-autoform/column/page', param1, data => {
        this.$refs.page.endSearch(
          {
            total: parseInt(data.total),
            list: data.records.map(t => {
              t.key = t.id
              return t
            })
          }
        )
      })
    },
    onDel (ids) {
      this.$http.post('/zg-autoform/column/del', ids, () => {
        this.$refs.page.search()
      })
    },
    onAdd () {
      const result = this.$refs.add.save()
      if (!result.isOk) {
        this.$error({ title: result.msg })
        return
      }
      this.$http.post('/zg-autoform/column/add', result.data, () => {
        this.$refs.page.hideAdd()
        this.$refs.page.search()
      })
    },
    onUpdate () {
      const result = this.$refs.update.save()
      if (!result.isOk) {
        this.$error({ title: result.msg })
        return
      }
      this.$http.post('/zg-autoform/column/update', result.data, () => {
        this.$refs.page.hideUpdate()
        this.$refs.page.search()
      })
    },
    onExtraAdd (key) {
      if (key === 0) {
        this.$refs.page.toAdd()
        this.$refs.add.reset()
      } else if (key === 1) {
        this.$refs.layout.open()
      } else if (key === 2) {
        // this.$warning({ title: '提示信息', content: '功能暂未实现' })
        // 同步表结构
        this.$http.post('/zg-autoform/column/sync', this.formId, () => {
          this.$success({ title: '同步成功!' })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
